<template>
    <div class="unitBar">
    <div class="componentTitle">这是sendChild.vue子组件</div>
    <div class="componentInfo">
      <input type="text" v-model="inputValue">
      <button @click="toFatherClick">发送至父组件</button>
      <button @click="toFatherClick1">发送至父组件1</button>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
let inputValue=ref('子值：')
let objdata=ref({
    name:'lisi',rabit:'写代码'
})
const emitsFunc=defineEmits(['toFather','toFatherobj'])
function toFatherClick(){
    emitsFunc('toFather',inputValue.value);
}
function toFatherClick1(){
    emitsFunc('toFatherobj',objdata.value);
}
</script>

<style scoped>
.unitBar{
    width: 100%;
    border: 2px solid #0076ee;
}
.componentTitle{
  width: 100%;
  height: 30px;
  background-color:  #0076ee;
  line-height: 30px;
  text-align: center;
  color: #ffff;
}
.componentInfo{
  height: 40px;
  line-height: 50px;
}
button{
  display: inline-block;
  margin: 0 10px;
}
</style>